// 容器组件
import React, { Component } from "react";
import Footer from "@/components/Footer";
import Header from "@/components/Header";
import $axios from "@/utils/request";
import Li from './Li';

class List extends Component {
  constructor(props) {
    super(props);
    this.state = {
      flowerList: []
    }
  }

  componentDidMount() {
    this.getFlowerList();
  }

  render() {
    let {flowerList} = this.state;
    return (
      <div className="home-list">
        <Header title="首页"></Header>
        <ul>
          {
            flowerList.map((item,index) => {
              return <Li item={item} key={index} {...this.props}/>
            })
          }
        </ul>

        <Footer page="index"></Footer>
      </div>
    );
  }

  getFlowerList() {
    let url = "/flower/getList";
    $axios
      .get(url)
      .then(res => {
        console.log(res);
        this.setState({
          flowerList: res.flowers
        })
      })
      .catch(err => {
        console.log(err);
      });
  }
}

export default List;
